<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>表格测试</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
</head>
<style>
    /* 防止下拉框的下拉列表被隐藏---必须设置--- 此样式和表格的样式有冲突 如果表格列数太多 会出现错乱的情况 目前我的解决方法是忽略下拉框的美化渲染 <select lay-ignore> */
    .layui-table-cell {
        overflow: visible;
    }

    .layui-table-box {
        overflow: visible;
    }

    .layui-table-body {
        overflow: visible;
    }

    /* 设置下拉框的高度与表格单元相同 */
    td .layui-form-select {
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    }
</style>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>


<script th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/tool/jquery-3.5.1.min.js}" charset="UTF-8"></script>
<script th:src="@{/static/tool/ajax.js}" charset="UTF-8"></script>
<script th:inline="none">
    layui.use(['table', 'form'], function (form) {
        var table = layui.table;
        const url = "/user/role";
        var roleNameJson = ajax_query(url).responseJSON;
        table.render({
            elem: '#test'
            , url: '/user/query'
            , id: 'userId'
            , done: function (res, curr, count) {
                count || this.elem.next('.layui-table-view').find('.layui-table-header').css('overflow', 'auto');
                layui.each($('select'), function (index, item) {
                    var elem = $(item);
                    elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                });
                form.render();
            }
            , cols: [[
                {width: 80, title: '序号', type: "numbers"},
                {field: 'userName', title: '用户名'}
                , {
                    field: '角色名', title: '职位', sort: true, align: 'center', templet: function (res) {
                        var nodeChild = '';
                        for (var i = 0; i < roleNameJson.length; i++) {
                            if (res.sysRole.length>0 && res.sysRole[0].roleId==roleNameJson[i].roleId) {
                                nodeChild += '<option selected = "selected" value="' + roleNameJson[i].roleId + '">' + roleNameJson[i].roleName + '</option>\n';
                                continue;
                            }
                            nodeChild += '<option  value="' + roleNameJson[i].roleId + '">' + roleNameJson[i].roleName + '</option>\n';
                        }
                        return '<select name="role" lay-filter="testSelect" lay-verify="required" >'+'<option selected>' + '待定' + '</option>\n' + nodeChild + '</select>'
                    }
                }
            ]]
            , page: true
        });

        //监听单元格编辑
        table.on('edit(test)', function (obj) {
            const url = "/user/"
            const value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            layer.msg('[ID: ' + obj.id + '] ' + field + ' 字段更改为：' + value);
            console.log(obj.data.userId);
            console.log(obj.data);
            // 使用ajax修改数据
            // ajax_crud()

        });
    });
</script>
</body>
</html>